<template>
  <!--drawer-->
  <el-drawer
    ref="drawer"
    title="消息设置"
    :visible.sync="dialogData.isShow"
    direction="rtl"
    custom-class="cus-drawer"
    size="550px"
  >
    <!--表单开始-->
    <el-form :model="form" label-width="100px">
      <!--账号关机-->
      <div class="cus-form-item">
        <span>账号关机</span>
      </div>
      <div class="cus-block-form">
        <el-form-item label="是否发送消息">
          <el-switch
            v-model="form.isSendMessage_1"
            active-value="0"
            inactive-value="1"
            active-color="#1dc8a4"
          ></el-switch>
        </el-form-item>

        <el-form-item label="触达通道">
          <el-select v-model="form.passage_1" placeholder="请选择">
            <el-option
              v-for="item in passageList"
              :key="item.value"
              :label="item.key"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="标题">
          <el-input v-model="form.title_1" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="内容">
          <el-input
            v-model="form.context_1"
            type="textarea"
            resize="none"
            rows="3"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </div>

      <!--修改积分-->
      <div class="cus-form-item">
        <span>修改积分</span>
      </div>
      <div class="cus-block-form">
        <el-form-item label="是否发送消息">
          <el-switch
            v-model="form.isSendMessage_2"
            active-value="0"
            inactive-value="1"
            active-color="#1dc8a4"
          ></el-switch>
        </el-form-item>

        <el-form-item label="触达通道">
          <el-select v-model="form.passage_2" placeholder="请选择">
            <el-option
              v-for="item in passageList"
              :key="item.value"
              :label="item.key"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="标题">
          <el-input v-model="form.title_2" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="内容">
          <el-input
            v-model="form.context_2"
            type="textarea"
            resize="none"
            rows="3"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </div>

      <!--发放奖品-->
      <div class="cus-form-item">
        <span>发放奖品</span>
      </div>
      <div class="cus-block-form">
        <el-form-item label="是否发送消息">
          <el-switch
            v-model="form.isSendMessage_3"
            active-value="0"
            inactive-value="1"
            active-color="#1dc8a4"
          ></el-switch>
        </el-form-item>

        <el-form-item label="触达通道">
          <el-select v-model="form.passage_3" placeholder="请选择">
            <el-option
              v-for="item in passageList"
              :key="item.value"
              :label="item.key"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="标题">
          <el-input v-model="form.title_3" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="内容">
          <el-input
            v-model="form.context_3"
            type="textarea"
            resize="none"
            rows="3"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </div>

      <!--修改发图作业权限-->
      <div class="cus-form-item">
        <span>修改发图作业权限</span>
      </div>
      <div class="cus-block-form">
        <el-form-item label="是否发送消息">
          <el-switch
            v-model="form.isSendMessage_4"
            active-value="0"
            inactive-value="1"
            active-color="#1dc8a4"
          ></el-switch>
        </el-form-item>

        <el-form-item label="触达通道">
          <el-select v-model="form.passage_4" placeholder="请选择">
            <el-option
              v-for="item in passageList"
              :key="item.value"
              :label="item.key"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            v-model="form.context_4"
            type="textarea"
            resize="none"
            rows="3"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </div>

      <!--修改发小视频作业权限-->
      <div class="cus-form-item">
        <span>修改发小视频作业权限</span>
      </div>
      <div class="cus-block-form">
        <el-form-item label="是否发送消息">
          <el-switch
            v-model="form.isSendMessage_5"
            active-value="0"
            inactive-value="1"
            active-color="#1dc8a4"
          ></el-switch>
        </el-form-item>

        <el-form-item label="触达通道">
          <el-select v-model="form.passage_5" placeholder="请选择">
            <el-option
              v-for="item in passageList"
              :key="item.value"
              :label="item.key"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="弹幕图片">
          <el-upload
            class="notice-uploader"
            action="#"
            :show-file-list="false"
            :on-success="handleNoticeSuccess"
            :before-upload="beforeNoticeUpload"
          >
            <img
              v-if="form.barrage_image"
              :src="form.barrage_image"
              class="notice"
            />
            <i v-else class="el-icon-plus notice-uploader-icon"></i>
          </el-upload>
          <div class="el-upload__tip">
            尺寸要求：330*330，JPG格式
          </div>
        </el-form-item>
      </div>
    </el-form>

    <!--底部菜单组-->
    <div class="cus-drawer_footer">
      <div class="cus-btns">
        <el-button type="success" plain @click="handleClose">
          取消
        </el-button>
        <el-button type="success" @click="handleSubmit">
          确认
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'settingDrawer',
  msg: '属性管理/消息设置',
  props: ['dialogData'],
  data() {
    return {
      isShowModal: true,
      operStatu: true,
      isShowAddBtn: true,
      // 编辑/添加
      deffer: '',
      form: {
        isSendMessage_1: 1,
        passage_1: 0,
        title_1: '',
        context_1: '',
        isSendMessage_2: 1,
        passage_2: 0,
        title_2: '',
        context_2: '',
        isSendMessage_3: 1,
        passage_3: 0,
        title_3: '',
        context_3: '',
        isSendMessage_4: 1,
        passage_4: 0,
        context_4: '',
        isSendMessage_5: 1,
        passage_5: 0,
        barrage_image: ''
      },
      passageList: [{ key: '推送', value: 0 }, { key: '短信', value: 1 }]
    }
  },
  methods: {
    // 取消
    handleClose() {
      this.dialogData.isShow = false
    },
    // 确认筛选条件
    handleSubmit() {
      this.dialogData.isShow = false
    },
    // 上传图片成功回调
    handleNoticeSuccess() {},
    // 上传图片前
    beforeNoticeUpload() {}
  }
}
</script>

<style lang="less">
.cus-drawer {
  //自定义样式
  .el-drawer__body {
    overflow-y: scroll;
  }
  .el-drawer__header {
    border-bottom: 1px solid #dcdfe6;
    padding: 10px;
    font-size: 15px;
    font-weight: 600;
  }
  .cus-form-item {
    margin-left: 20px;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    color: #0d1636;
    font-weight: 600;
    padding-left: 3px;
    border-left: 3px solid #1dc8a4;
  }
  .cus-block-form {
    margin-top: 30px;
    .el-input,
    .el-select,
    .el-textarea {
      width: 100%;
    }
  }
  .cus-divider {
    position: relative;
    left: 30px;
    top: -5px;
    color: #606266;
  }
  .cus-grup--bottom {
    margin-bottom: 50px;
  }
  .el-form-item {
    margin-left: 20px;
    margin-right: 20px;
  }
  //upload image
  .notice-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .notice-uploader .el-upload:hover {
    border-color: #1dc8a4;
  }
  .notice-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .notice {
    width: 100px;
    height: 100px;
    display: block;
  }
  .el-upload__tip {
    margin-top: 0;
    margin-bottom: 50px;
    color: #c0c4cc;
  }
  .cus-drawer_footer {
    width: 100%;
    height: 60px;
    line-height: 60px;
    position: absolute;
    bottom: 0;
    border-top: 1px solid #dcdfe6;
    background-color: #fff;
    display: flex;
    justify-content: flex-end;
    .cus-btns {
      margin-right: 30px;
    }
    .el-button {
      height: 32px;
      width: 100px;
      border-radius: 2px;
      font-family: 'Microsoft YaHei';
      font-size: 14px;

      &.el-button--primary {
        background-color: #1dc8a4;
        border-color: #1dc8a4;

        &:hover {
          background-color: rgba(29, 200, 164, 0.8);
        }
      }

      &.el-button--default {
        &:hover {
          border-color: #1dc8a4;
          background-color: rgba(29, 200, 164, 0.8);
          color: #fff;
        }
      }
    }
  }
}
</style>
